<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://img2.wyzc.com/public/js/jquery/jquery-1.8.2.min.js?wyzc_v=201406201655"></script>
	<style>
		img {
			border: 1px solid #CCC;
		}
		li {
			list-style: none;
		}
	</style>
</head>
<body>

<ul>
	<li><img src="./default.png" data-src="./imgs/1.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/2.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/3.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/4.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/5.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/6.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/7.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/1.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/2.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/3.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/4.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/5.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/6.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/7.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/1.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/2.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/3.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/4.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/5.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/6.jpg"></li>
	<li><img src="./default.png" data-src="./imgs/7.jpg"></li>
</ul>


<script>

	(function ($, window) {

		var lazyLoad = function (ele, opt) {
			this.element = ele;
			this.dealut_opt = {
				src:'src',
				loadTime:300,
				debug:false
			};
			this.option = $.extend({},this.dealut_opt,opt);
		};

		lazyLoad.prototype = {
			run : function () {
				this.loadImg();
				this.onScroll();
			},
			onScroll : function () {
				var lazyLoader = this;
				$(window).scroll(function () {
					lazyLoader.loadImg();
				});
			},
			isVisible : function (element) {

				var minHeight = $(window).scrollTop();
				var maxHeight = minHeight + $(window).height();

				// 元素的顶部和底部
				var elementTop = element.offset().top;
				var elementHeight = element.height();

				// 比较元素的位置和可视区域
				if ( (elementTop >= minHeight && elementTop < maxHeight)
						|| (elementTop + elementHeight >= minHeight && elementTop + elementHeight < maxHeight)
				) {
					return true
				}
				return false;
			},
			loadImg : function () {
				if ( this.element.length > 0 ) {
					var lazyLoader = this;
					this.element.each(function () {
						var _this = $(this);
						var src = _this.data(lazyLoader.option.src);
						if ( lazyLoader.isVisible(_this) ) {
							setTimeout(function(){
								if(lazyLoader.option.debug)console.log(src +' 已加载...');
								_this.attr('src', src);
							},lazyLoader.option.loadTime);
						}
					})
				}
			}
		};

		$.fn.lazyload = function (opt) {
			var loazLoad = new lazyLoad(this, opt);
			loazLoad.run();
		}

	})(jQuery, window)

	$('img').lazyload({
		'loadTime':500,
		'debug':true
	});

</script>
</body>
</html>